<template>
	<view class="body">
		<view class="course">
			<view class="left">
				<view class="lefttit">
					预约课程
				</view>
				<picker 
				mode="selector"
				:range="array" 
				range-key="name" 
				@change="titlePicker"
				>
				<view class="uni-input">{{title}}</view>
				</picker>
			</view>
			<view class="right">
				<p class="iconfont icon-more"></p>
			</view>
		</view>
		<view class="time">
			<p>预约时间</p>
			<view class="timeright">
			<picker mode="date" :value="date" @change="bindTimeChange">
				<view class="uni-input">{{time}}</view>
			</picker>
			<view class="righticon">
				<p class="iconfont icon-more"></p>
			</view>
			</view>
		</view>
		<view class="message">
			<view class="message_name">
				<view>姓名</view>
				<view class="content_name">
					<input @input="getname" type="text" value="" />
					<view class="righticon">
						<p class="iconfont icon-more"></p>
					</view>
				</view>
			</view>
			<view class="message_sex">
				<view>性别</view>
				<view class="content_sex">
					<radio-group @change="getsex">
					<label class="radio">
					<radio :value="'0'" checked="true" color="#4CD964">男</radio>
					<radio :value="'1'" style="margin-left: 20rpx;" color="#4CD964">女</radio>
					</label>
					</radio-group>
				</view>
			</view>
			<view class="message_day">
				<view>出生日期</view>
				<view class="content_day">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
					<view class="righticon">
						<p class="iconfont icon-more"></p>
					</view>
				</view>
			</view>
		</view>
		<view class="remark">
			<view class="remarktit">
				备注
			</view>
			<textarea @blur="bindTextAreaBlur" placeholder="填写备注信息"/>
		</view>
		<view class="sumbit">
			<button type="default" @click="getadd">提交</button>
		</view>
		
	</view>
	
</template>

<script>
	import {getcourse,addreservelist} from '../../api/index.js'
	export default {
	    data() {
			const currentDate = this.getDate({
			            format: true
			        })
	        return {
				title: '请选择',
	            array: [],
	            index: 0,
				time: '2022-07-20 23:25:36',
				date: currentDate,
				params:{
					name:'',
					coruseName:'',
					tel:'15031023319',
					sex:0,
					birthday:'',
					remarks:'',
					retime:""
				}
	        }
	    },
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
	    methods: {
			async getcourses(){
				let res = await getcourse()
				this.array=res.data.list
			},
			async getadd(){
				console.log(this.params)
				// let res = await addreservelist(this.params)
				// if(res.errCode==10000){
				// 	console.log(res)
				// 	uni.navigateTo({
				// 		url:'/pages/reserve/reserve'
				// 	})
				// }
			},
			getsex(e){
				this.params.sex=e.detail.value
			},
			getname(e){
				this.params.name=e.detail.value
			},
			 bindTextAreaBlur: function (e) {
				this.params.remarks=e.detail.value
			},
	        titlePicker(e){ 
	            this.title = this.array[e.target.value].name
	            this.params.coruseName=this.array[e.target.value].name
	        },
			 bindTimeChange: function(e) {
			    this.time = e.detail.value
				this.params.retime=e.target.value
			 },
			 bindDateChange: function(e) {
			    this.date = e.detail.value
				this.params.birthday=e.detail.value
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
				let day = date.getDate();
				let hours = date.getHours()
				let min = date.getMinutes();
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
				hours = hours > 9 ? hours : '0' + hours;
				min = min > 9 ? min : '0' + min;
			    return `${year}-${month}-${day}-${hours}-${min}`;
			}
	    },
		onLoad(){
			this.getcourses()
		}
	}
</script>

<style scoped lang="less">
	.body{
		background-color: #f6f6f6;
		width: 750rpx;
		padding-top: 25rpx;
		.course{
			height: 145rpx;
			background-color: #FFFFFF;
			display: flex;
			margin-bottom: 33rpx;
			.left{
				padding-left: 30rpx;
				box-sizing: border-box;
				flex: 1;
				.lefttit{
					margin-top: 30rpx;
					font-size: 28rpx;
					margin-bottom: 15rpx;
				}
				.uni-input{
					color: #cbcbcb;
				}
			}
			.right{
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.time{
			display: flex;
			justify-content: space-between;
			padding-left: 30rpx;
			height: 98rpx;
			margin-bottom: 25rpx;
			background-color: #FFFFFF;
			padding-top: 30rpx;
			box-sizing: border-box;
			
			p{
				font-size: 28rpx;
			}
			.timeright{
				display: flex;
				font-size: 27rpx;
				.uni-input{
					margin-top: 5rpx;
				}
			}
			.righticon{
				width: 80rpx;
				
				display: flex;
				justify-content: center;
				p{
					font-size: 40rpx;
				}
			}
		}
		.message{
			height: 330rpx;
			margin-bottom: 20rpx;
			padding-left:30rpx ;
			background-color: #FFFFFF;
			.message_name{
				height: 109rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #ecedee;
				.content_name{
					display: flex;
					input{
						width: 100rpx;
						margin-top: 5rpx;
						font-size: 24rpx;
					}
					.righticon{
						width: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			.message_sex{
				margin-right: 40rpx;
				height: 109rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #ecedee;
			}
			.message_day{
				height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.content_day{
					display: flex;
					.righticon{
						width: 80rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
		.remark{
			background-color: #FFFFFF;
			padding-left: 30rpx;
			.remarktit{
				height: 94rpx;
				display: flex;
				align-items: center;
			}
		}
		.sumbit{
			background-color: #FFFFFF;
			button{
				width: 665rpx;
				height: 71rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				font-size: 31rpx;
				color: #FFFFFF;
				background-color: #3b87f6;
				border-radius: 50rpx;
			}
		}
	}
</style>
